<template>
  <span style="padding:0px">
    <el-button size="small" type="primary" icon="el-icon-upload" @click.native="importData.show = true">导入</el-button>
    <el-dialog title="导入" :visible.sync="importData.show" :fullscreen="true">
      <div class="my-bar">
        <el-form v-show="showOne" :inline="true" class="float-left" size="small">
          <upload-excel size="small" :disabled="importData.loading" :on-success="handleSuccess" :before-upload="beforeUpload" />
          <el-button size="small" type="primary" icon="el-icon-download" @click="downloadTmp()">下载模板</el-button>
        </el-form>
        <el-form v-show="!showOne" :inline="true" class="float-left" size="small">
          <el-form-item>
            <el-button type="primary" icon="el-icon-back" @click="closeImport()">返回</el-button>
          </el-form-item>
          <el-form-item>
            <el-button :loading="importData.loading" type="success" icon="el-icon-check" @click="onImport()">导入第一个</el-button>
          </el-form-item>
          <el-form-item>
            <el-button :loading="importData.loading" type="danger" icon="el-icon-caret-bottom" @click="onJump()">跳过第一个</el-button>
          </el-form-item>
          <el-form-item>
            <el-button :loading="importData.loading" type="success" icon="el-icon-finished" @click="batchImport()">批量导入所有</el-button>
          </el-form-item>
        </el-form>
      </div>
      <el-table v-if="!showOne && importData.tableData && importData.tableData.length > 0" :data="[importData.tableInput]" border fit highlight-current-row>
        <el-table-column v-for="item of importData.tableHeader" :key="item" :prop="item" :label="item">
          <template slot-scope="scope">
            <el-select v-model="scope.row[item]" placeholder="请选择类型" allow-create>
              <el-option v-for="itm in importData.tableMap" :key="itm" :label="itm" :value="importData.tableMap[itm]" />
            </el-select>
          </template>
        </el-table-column>
      </el-table>
      <el-table v-if="!showOne && importData.tableData && importData.tableData.length > 0" :data="importData.tableData" border highlight-current-row>
        <el-table-column v-for="item of importData.tableHeader" :key="item" :show-overflow-tooltip="true" :prop="item" :label="item" />
      </el-table>
    </el-dialog>
  </span>
</template>

<script>
// import api from '@/api/service'
import { parseTime } from '@/utils/index'
import UploadExcel from '@/components/UploadExcel'

export default {
  components: {
    UploadExcel
  },
  props: {
    bean: {
      type: String,
      default: 'user'
    },
    tableMap: {
      type: Object,
      default: () => {}
    },
    onShow: {
      type: Function,
      default: null
    }
  },
  data() {
    return {
      importData: {
        show: false,
        loading: false,
        tableData: [],
        tableHeader: [],
        tableInput: {}
      },
      showOne: true
      // tableMap: {
      //   '自增ID': 'id',
      //   '手机号码': 'phone',
      //   '姓名': 'name',
      //   '年级': 'grade',
      //   '专业': 'zhuanye'
      // }
    }
  },
  watch: {
    tableMap: {
      handler(newValue, oldValue) {
        console.log('newValue', newValue)
        console.log('oldValue', oldValue)
        // console.log(util.looseEqual(newValue, oldValue))
      },
      deep: true
    }
  },
  mounted() {

  },
  methods: {
    beforeUpload(file) {
      // 小于 10 M
      if (file.size / 1024 / 1024 < 10) {
        this.importData.loading = true
        this.showOne = false
        // this.onShow && this.onShow(true)
        return true
      }
      this.$message({
        message: '上传文件大于限制的10M!',
        type: 'warning'
      })
      return false
    },
    handleSuccess({ results, header }) {
      this.importData.loading = false
      console.log('handleSuccess', header)
      this.importData.tableData = results
      this.importData.tableHeader = header.filter(v => !v.startsWith('UNKNOWN '))
      this.importData.tableInput = {}
      for (const head of this.importData.tableHeader) {
        this.importData.tableInput[head] = !this.tableMap[head] ? head : this.tableMap[head]
      }
    },
    onJump() {
      this.importData.tableData.shift()
    },
    onImport() {
      this.importData.loading = true
      const data = this.importData.tableData.shift()
      const temp = {}
      for (const prop in data) {
        temp[this.importData.tableInput[prop]] = data[prop]
      }
      console.log('temp', JSON.stringify(temp))
      this.importData.loading = false
    },
    batchImport() {
      this.importData.loading = true
      const list = []
      for (const data of this.importData.tableData) {
        const temp = {}
        for (const prop in data) {
          temp[this.importData.tableInput[prop]] = data[prop]
        }
        list.push(temp)
      }
      this.importData.tableData = []
      console.log('batchImport', JSON.stringify(list))
      this.importData.loading = false
    },
    closeImport() {
      this.showOne = true
      // this.onShow && this.onShow(false)
    },
    downloadTmp() {
      const header = []
      const filter = []
      for (const prop in this.tableMap) {
        header.push(prop)
        filter.push(this.tableMap[prop])
      }
      let fileName = this.bean
      if (fileName.indexOf('.') > -1) {
        fileName = fileName.substring(fileName.indexOf('.') + 1)
      }
      import('@/vendor/Export2Excel').then(excel => {
        excel.export_json_to_excel({
          header: header,
          data: [filter],
          filename: '模版文件[' + fileName + ']_' + parseTime(new Date()),
          autoWidth: true,
          bookType: 'xlsx'
        })
      })
    }
  }
}
</script>
